<template>
  <div>
    <div class="formData">
      <div class="titleBox center">
        <div class="title">{{ $t('messages.contactUs.title') }}</div>
      </div>
      <div class="form center">
        <div class="formBox">
          <el-form :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item>
              <span class="xxxx">*</span>
              <el-input
                class="inputStyle"
                v-model="formData.name"
                :placeholder="$t('messages.contactUs.contactUs1')"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <span class="xxxx"></span>
              <el-input
                class="inputStyle"
                v-model="formData.surname"
                :placeholder="$t('messages.contactUs.contactUs2')"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <span class="xxxx">*</span>
              <el-input
                class="inputStyle"
                v-model="formData.email"
                :placeholder="$t('messages.contactUs.contactUs3')"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <span class="xxxx">*</span>
              <el-input
                class="inputStyle"
                v-model="formData.phone"
                :placeholder="$t('messages.contactUs.contactUs4')"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <span class="xxxx"></span>
              <el-input
                class="inputStyle2"
                v-model="formData.address"
                :placeholder="$t('messages.contactUs.contactUs5')"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <span class="xxxx">*</span>
              <el-input
                class="inputStyle"
                v-model="formData.city"
                :placeholder="$t('messages.contactUs.contactUs6')"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <span class="xxxx">*</span>
              <el-input
                class="inputStyle"
                v-model="formData.region"
                :placeholder="$t('messages.contactUs.contactUs7')"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <span class="xxxx"></span>
              <el-input
                class="inputStyle"
                v-model="formData.postalCode"
                :placeholder="$t('messages.contactUs.contactUs8')"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <span class="xxxx">*</span>
              <el-input
                class="inputStyle"
                v-model="formData.selectCountry"
                :placeholder="$t('messages.contactUs.contactUs9')"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <span class="xxxx">*</span>
              <el-input
                class="inputStyle"
                v-model="formData.vehicleModel"
                :placeholder="$t('messages.contactUs.contactUs10')"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <span class="xxxx">*</span>
              <el-input
                class="inputStyle"
                v-model="formData.brand"
                :placeholder="$t('messages.contactUs.contactUs11')"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-checkbox-group v-model="checkList">
                <el-checkbox
                  :label="$t('messages.contactUs.contactUs12')"
                  value="1"
                  fill="#ffdd00"
                  text-color="#ffdd00"
                />
                <el-checkbox
                  :label="$t('messages.contactUs.contactUs13')"
                  value="2"
                  fill="#ffdd00"
                  text-color="#ffdd00"
                />
                <el-checkbox :label="$t('messages.contactUs.contactUs14')" value="3" />
                <el-checkbox :label="$t('messages.contactUs.contactUs15')" value="4" />
              </el-checkbox-group>
            </el-form-item>
          </el-form>
          <div class="footButton">
            <div class="button center" @click="sumbitFn">
              {{ $t('messages.contactUs.contactUs16') }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { contactUsAdd } from '@/http/api/home.js'
import { ElMessage } from 'element-plus'
import { ref, reactive } from 'vue'
let formData = reactive({
  name: '',
  surname: '',
  email: '',
  phone: '',
  address: '',
  city: '',
  region: '',
  postalCode: '',
  selectCountry: '',
  vehicleModel: '',
  brand: '',
})
let checkList = ref([])
const sumbitFn = async () => {
  try {
    let rule = ['name', 'email', 'phone', 'city', 'region', 'selectCountry', 'vehicleModel', 'brand']
    rule.forEach((item) => {
      for (const key in formData) {
        if (!formData[item]) throw 'Please provide the complete information.'
      }
    })
    if (checkList.value.length != 4) throw 'Please agree to check the information.'
    await contactUsAdd(formData)
    ElMessage.success('submit successfully')
    checkList.value = []
    let formData2 = {
      name: '',
      surname: '',
      email: '',
      phone: '',
      address: '',
      city: '',
      region: '',
      postalCode: '',
      selectCountry: '',
      vehicleModel: '',
      brand: '',
    }
    Object.assign(formData, formData2)
  } catch (error) {
    ElMessage.error(error)
  }

}
</script>

<style lang="scss" scoped>
.inputStyle {
  width: 650px;
}
.inputStyle2 {
  width: 1350px;
}
.formData {
  height: 85vh;
  background-image: linear-gradient(#121617, #121617 60%);
}
.titleBox {
  .title {
    font-weight: bold;
    font-size: 32px;
    color: #ffdd00;
    margin-top: 70px;
    margin-bottom: 40px;
  }
}
.form {
  width: 100%;
  .formBox {
    width: 1420px;
  }
}
::v-deep .el-input__wrapper {
  background: #242424 !important;
  border: 1px solid rgb(255, 221, 0);
  box-shadow: 0 0 !important;
}
::v-deep .is-focus {
  box-shadow: 0 !important;
}
::v-deep .el-checkbox {
  display: block;
}
::v-deep .el-checkbox__label {
  color: #ffdd00 !important;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background: #ffdd00;
  border: #ffdd00;
}
.footButton {
  float: right;
  .button {
    background: #ffdd00;
    width: 150px;
    height: 50px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 135px;
  }
  .button:active {
    opacity: 0.9;
  }
}
::v-deep .el-input__inner {
  color: white !important;
}
.xxxx {
  color: #ffdd00;
  font-size: 16px;
  margin-right: 5px;
  width: 15px;
}
.xxxx2 {
  color: #ffdd00;
  font-size: 150%;
  margin-right: 12px;
}
::v-deep .el-input__inner {
  font-size: 19px;
}
</style>